<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
    }
    
    body {
        background-image: url("bj.jpg");
        background-size: cover;
    }
    
    table {
        border-collapse: collapse;
        width: 700px;
        margin: 0 auto;
        margin-top: 25px;
        margin-left: 80px;
    }
    
    td,
    th {
        width: 200px;
        border: 1px solid black;
    }
    
    .box {
        margin: 0 auto;
        margin-top: 100px;
        width: 800px;
        height: 400px;
        background-color: white;
        padding: 30px;
        position: relative;
        border-radius: 50px;
        background-color: rgba(0, 100, 0, 0.2);
    }
    
    .box h1 {
        text-align: center;
        letter-spacing: 5px;
        padding: 0 20px 20px 20px;
        text-shadow: 3px 3px 3px gold;
        color: white;
        font-size: 50px;
    }
    
    ul {
        width: 250px;
    }
    
    ul li {
        float: left;
        padding-right: 20px;
        text-align: center;
    }
    
    tbody {
        text-align: center;
    }
    
    button {
        padding-left: 5px;
        padding-right: 5px;
        border-radius: 10px;
        cursor: pointer;
    }
    
    button:hover {
        background-color: red;
        color: white;
    }
    
    .btn_z {
        position: absolute;
        top: 185px;
        left: 20px;
    }
    
    .btn_d {
        position: absolute;
        top: 235px;
        left: 20px;
    }
    
    .search {
        width: 300px;
        margin-top: 30px;
    }
    
    input[type="text"] {
        border: 1px solid red;
    }
</style>

<body>
    <div class="box">
        <h1>购物车</h1>
        商品：<input type="text" class="input_name">&nbsp&nbsp&nbsp&nbsp&nbsp 价格： <input type="text" class="input_price">&nbsp&nbsp&nbsp&nbsp&nbsp 数量：
        <input type="text" class="input_number">
        <button class="btn_add">添加</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
        <button class="btn_z">价格正序</button>
        <button class="btn_d">价格倒序</button>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 请输入商品名称 <input type="text"
            class="search">&nbsp&nbsp<button class="btn_srh">搜索</button>
        <table>
            <thead>
                <tr>
                    <th><input type="checkbox" class="select_all">商品</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>总价</th>
                    <th>状态</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
            <tfoot>
                <tr>
                    <th colspan=5>总价：0</th>
                </tr>
            </tfoot>
        </table>
        <ul>
            <a>查询结果在这：</a>
        </ul>
    </div>

</body>
<script>
    var array = [{
        name: "电饭煲",
        price: 200,
        number: "3"
    }, {
        name: "电视机",
        price: 1000,
        number: "1"
    }, {
        name: "抽油烟机",
        price: 300,
        number: "2"
    }, {
        name: "微波炉",
        price: 500,
        number: "10"
    }]
    window.onload = function() {
        var inputName = document.querySelector(".input_name");
        var inputPrice = document.querySelector(".input_price");
        var inputNumber = document.querySelector(".input_number");
        var searchBox = document.querySelector(".search");
        var btnAdd = document.querySelector(".btn_add");
        var btnZ = document.querySelector(".btn_z");
        var btnD = document.querySelector(".btn_d");
        var tbody = document.querySelector("tbody");
        var btnSrh = document.querySelector(".btn_srh");
        var ul = document.querySelector("ul");
        var priceAll = document.querySelector("tfoot th");

        // 显示数据
        var showlist = function() {
            var content = "";
            for (var i = 0; i < array.length; i++) {
                content = content + "<tr index=" + i + "><td><input type='checkbox' class='select'>" + array[i].name + "</td><td>" + array[i].price + "</td><td><button class='btn_subnum'> - </button><span>" + array[i].number +
                    "</span><button class='btn_addnum'> + </button></td><td>" + (array[i].price * array[i].number) + "</td><td><button class='btn_delete'>" + "删除" + "</button></td><tr>";
            }
            tbody.innerHTML = content;
            var btnDelete = document.querySelectorAll(".btn_delete");
            var btnAdds = document.querySelectorAll(".btn_addnum");
            var btnSubs = document.querySelectorAll(".btn_subnum");

            for (var i = 0; i < btnDelete.length; i++) {
                btnDelete[i].addEventListener("click", function(e) {
                    var index = this.parentNode.parentNode.getAttribute("index");
                    tbody.removeChild(this.parentNode.parentNode);
                    array.splice(index, 1);
                })
            }
            for (var a = 0; a < btnAdds.length; a++) {
                btnAdds[a].addEventListener("click", function(e) {
                    var td = this.parentNode;
                    var tr = this.parentNode.parentNode;
                    var children = this.parentNode.children;
                    var span = children[1];
                    var spans = Number(span.innerText) + 1;
                    span.innerText = spans;
                    console.log(spans);
                    var price = Number(tr.children[1].innerText);
                    var totalPrice = tr.children[3];
                    totalPrice.innerText = price * spans;

                    var index = tr.getAttribute("index");
                    array[index].number = spans;
                    var checkBox = tr.children[0].querySelector("input[type='checkbox']");
                    var nowPrice = Number(priceAll.innerText.slice(3));
                    // console.log(price);

                    if (checkBox.checked == true) {
                        priceAll.innerText = "总价:" + (nowPrice + price);
                    }
                })
            }

            for (var a = 0; a < btnSubs.length; a++) {
                btnSubs[a].addEventListener("click", function(e) {
                    var td = this.parentNode;
                    var tr = this.parentNode.parentNode;
                    var children = this.parentNode.children;
                    var span = children[1];
                    var spans = Number(span.innerText) - 1;
                    span.innerText = spans;

                    var price = Number(tr.children[1].innerText);

                    var totalPrice = tr.children[3];
                    totalPrice.innerText = price * spans;

                    var index = tr.getAttribute("index");
                    array[index].number = spans;

                    var checkBox = tr.children[0].querySelector("input[type='checkbox']");
                    var nowPrice = Number(priceAll.innerText.slice(3));
                    // console.log(price);

                    if (checkBox.checked == true) {
                        priceAll.innerText = "总价:" + (nowPrice - price);
                    }

                })
            }
            // 全选
            var selects = document.querySelectorAll(".select");
            var selectAll = document.querySelector(".select_all");

            selectAll.addEventListener("click", function(e) {
                var tPrice = 0;
                if (selectAll.checked == true) {
                    for (var i = 0; i < selects.length; i++) {
                        selects[i].checked = true;
                        var price = array[i].price;
                        var number = array[i].number;
                        tPrice = tPrice + price * number;
                    }
                }
                if (selectAll.checked == false) {
                    for (var i = 0; i < selects.length; i++) {
                        selects[i].checked = false;
                    }
                }
                priceAll.innerText = "总价:" + tPrice;
            })
            for (var i = 0; i < selects.length; i++) {
                selects[i].addEventListener("click", function(e) {
                    if (this.checked == false) {
                        selectAll.checked = false;
                    }
                })

            }
            // 总计
            for (var i = 0; i < selects.length; i++) {
                selects[i].addEventListener("change", function(e) {
                    var td = this.parentNode;
                    var tr = this.parentNode.parentNode;
                    var index = tr.getAttribute("index");
                    var price = array[index].price;
                    var number = array[index].number;
                    var totalPrice = price * number;
                    var nowPrice = Number(priceAll.innerText.slice(3));
                    console.log(priceAll.innerText);
                    console.log(nowPrice);

                    if (this.checked == true) {
                        priceAll.innerText = "总价:" + (nowPrice + totalPrice);
                    } else {
                        priceAll.innerText = "总价:" + (nowPrice - totalPrice);
                    }

                })

            }

        }

        showlist();

        // 添加
        btnAdd.addEventListener("click", function(e) {
            var inputNames = inputName.value;
            var inputPrices = inputPrice.value;
            var inputNumbers = inputNumber.value;
            if (inputNames == "" || inputPrices == "" || inputNumbers == "") {
                return;
            }
            var temp = {};
            temp.name = inputNames;
            temp.price = inputPrices;
            temp.number = inputNumbers;
            array.push(temp);
            showlist();

        });

        // 排序
        var swap = function(oldIndex, newIndex) {
            var temp = array[oldIndex];
            array[oldIndex] = array[newIndex];
            array[newIndex] = temp;
        }


        btnZ.addEventListener("click", function(e) {
            for (var i = 0; i < array.length; i++) {
                var min = array[i].price;
                var minIndex = i;
                for (var j = i + 1; j < array.length; j++) {
                    if (array[j].price < min) {
                        min = array[j].price;
                        minIndex = j;
                    }
                }
                if (minIndex != i) {
                    swap(i, minIndex);
                }
                console.log(array);
            }
            showlist();
        })

        btnD.addEventListener("click", function(e) {
                for (var i = 0; i < array.length; i++) {
                    var max = array[i].price;
                    var maxIndex = i;
                    for (var j = i + 1; j < array.length; j++) {
                        if (array[j].price > max) {
                            max = array[j].price;
                            maxIndex = j;
                        }
                    }
                    if (maxIndex != i) {
                        swap(i, maxIndex);
                    }
                    console.log(array);
                }
                showlist();
            })
            // 搜索
        var contents = "";
        btnSrh.addEventListener("click", function(e) {
            var searchBoxs = searchBox.value;
            contents = "";
            ul.innerHTML = "<li>你要搜索的内容不存在</li>";
            if (searchBoxs == "") {
                contents = "<li>请输入要搜索的内容</li>";
                ul.innerHTML = contents;
            } else {
                for (var i = 0; i < array.length; i++) {
                    if (searchBoxs == array[i].name) {
                        show = array[i];
                        // return show;
                        contents = contents + "<li>商品:" + show.name + "</li><li>价格:" + show.price + "</li><li>数量:" + show.number + "</li>";
                        ul.innerHTML = contents;

                    }
                }
            }

        })



    }
</script>

</html>